<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>社交网站 - 我的页面</title>
    <!-- 引入 Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
    <!-- 引入 Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        /* 全局样式 */
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: #f5f5f5;
            overflow-x: hidden;
        }
        
        /* 手机框架样式 */
        .phone-frame {
            max-width: 375px;
            margin: 20px auto;
            background-color: white;
            border-radius: 30px;
            box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);
            overflow: hidden;
            position: relative;
            height: 700px;
        }
        
        /* 页面容器 */
        .profile-container {
            height: 100%;
            overflow-y: auto;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }
        
        .profile-container::-webkit-scrollbar {
            display: none;
        }
        
        /* 样式切换按钮 */
        .style-switcher {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1000;
        }
        
        .style-switcher button {
            margin: 5px;
            border-radius: 20px;
            padding: 8px 16px;
            font-size: 14px;
            transition: all 0.3s ease;
        }
        
        /* 通用头像样式 */
        .avatar {
            border-radius: 50%;
            overflow: hidden;
            border: 3px solid white;
        }
        
        .avatar-large {
            width: 120px;
            height: 120px;
        }
        
        .avatar-small {
            width: 40px;
            height: 40px;
        }
        
        /* 卡片样式 */
        .info-card {
            border-radius: 15px;
            margin-bottom: 15px;
            overflow: hidden;
            transition: transform 0.3s ease;
        }
        
        .info-card:hover {
            transform: translateY(-2px);
        }
        
        /* 样式1 */
        .style-1 .header-cover {
            height: 200px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-end;
            padding-bottom: 30px;
        }
        
        .style-1 .profile-info {
            text-align: center;
            padding: 15px;
            margin-top: -50px;
        }
        
        .style-1 .stats {
            display: flex;
            justify-content: space-around;
            padding: 15px 0;
            border-bottom: 1px solid #eee;
        }
        
        .style-1 .stat-item {
            text-align: center;
        }
        
        .style-1 .stat-number {
            font-weight: bold;
            font-size: 18px;
        }
        
        .style-1 .stat-label {
            font-size: 12px;
            color: #666;
        }
        
        /* 样式2 */
        .style-2 .profile-header {
            padding: 20px;
            background-color: #f8f9fa;
            border-bottom: 1px solid #eee;
        }
        
        .style-2 .profile-header-content {
            display: flex;
            align-items: center;
        }
        
        .style-2 .profile-details {
            margin-left: 15px;
        }
        
        .style-2 .profile-actions {
            display: flex;
            justify-content: space-between;
            padding: 15px;
        }
        
        /* 样式3 */
        .style-3 {
            background-color: #1a1a1a;
            color: white;
        }
        
        .style-3 .header-cover {
            height: 180px;
            background: linear-gradient(135deg, #333 0%, #111 100%);
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-end;
            padding-bottom: 20px;
        }
        
        .style-3 .profile-info {
            text-align: center;
            padding: 15px;
            margin-top: -40px;
        }
        
        .style-3 .info-card {
            background-color: #2a2a2a;
            border: none;
            color: white;
        }
        
        /* 动画效果 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .fade-in {
            animation: fadeIn 0.5s ease forwards;
        }
        
        /* 隐藏其他样式 */
        .profile-style {
            display: none;
        }
        
        .profile-style.active {
            display: block;
        }
    </style>
</head>
<body>
    <!-- 样式切换器 -->
    <div class="style-switcher">
        <button id="style1Btn" class="btn btn-primary active">样式1</button>
        <button id="style2Btn" class="btn btn-secondary">样式2</button>
        <button id="style3Btn" class="btn btn-dark">暗黑模式</button>
    </div>

    <!-- 手机框架 -->
    <div class="phone-frame">
        <!-- 样式1 -->
        <div id="style1" class="profile-container profile-style active">
            <!-- 封面图 -->
            <div class="header-cover">
                <!-- 头像 -->
                <div class="avatar avatar-large">
                    <img src="https://picsum.photos/id/64/200/200" alt="用户头像" class="w-100 h-100 object-cover">
                </div>
            </div>
            
            <!-- 个人信息 -->
            <div class="profile-info">
                <h3 class="font-weight-bold">张小明</h3>
                <p class="text-muted">热爱旅行和摄影的自由职业者</p>
            </div>
            
            <!-- 统计数据 -->
            <div class="stats">
                <div class="stat-item">
                    <div class="stat-number">258</div>
                    <div class="stat-label">关注</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number">1.2k</div>
                    <div class="stat-label">粉丝</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number">368</div>
                    <div class="stat-label">帖子</div>
                </div>
            </div>
            
            <!-- 内容区域 -->
            <div class="p-4">
                <!-- 个人简介卡片 -->
                <div class="info-card bg-white p-4 shadow-sm">
                    <h4 class="font-weight-bold mb-3"><i class="fas fa-user-circle mr-2"></i>个人简介</h4>
                    <p>热爱生活，喜欢记录身边的美好瞬间。曾去过20多个国家，拍摄了大量旅行照片。希望通过分享，让更多人看到世界的美丽。</p>
                </div>
                
                <!-- 动态卡片 -->
                <div class="info-card bg-white p-4 shadow-sm">
                    <h4 class="font-weight-bold mb-3"><i class="fas fa-fire mr-2"></i>最新动态</h4>
                    <div class="mb-3 pb-3 border-bottom">
                        <div class="d-flex">
                            <div class="avatar avatar-small">
                                <img src="https://picsum.photos/id/64/200/200" alt="用户头像" class="w-100 h-100 object-cover">
                            </div>
                            <div class="ml-2">
                                <p class="font-weight-bold">张小明</p>
                                <p class="text-muted text-sm">今天 14:30</p>
                            </div>
                        </div>
                        <p class="mt-2">刚刚完成了最新的摄影作品集，希望大家喜欢！#摄影 #作品集</p>
                        <div class="mt-2 grid grid-cols-3 gap-1">
                            <img src="https://picsum.photos/id/10/300/300" alt="照片" class="w-100 rounded">
                            <img src="https://picsum.photos/id/15/300/300" alt="照片" class="w-100 rounded">
                            <img src="https://picsum.photos/id/20/300/300" alt="照片" class="w-100 rounded">
                        </div>
                    </div>
                    <div>
                        <div class="d-flex justify-content-between">
                            <button class="btn btn-light btn-sm"><i class="far fa-heart mr-1"></i> 128</button>
                            <button class="btn btn-light btn-sm"><i class="far fa-comment mr-1"></i> 36</button>
                            <button class="btn btn-light btn-sm"><i class="far fa-share-square mr-1"></i> 分享</button>
                        </div>
                    </div>
                </div>
                
                <!-- 相册卡片 -->
                <div class="info-card bg-white p-4 shadow-sm">
                    <h4 class="font-weight-bold mb-3"><i class="fas fa-images mr-2"></i>精选相册</h4>
                    <div class="grid grid-cols-3 gap-1">
                        <img src="https://picsum.photos/id/10/300/300" alt="相册照片" class="w-100 rounded" style="height: 100px; object-fit: cover;">
                        <img src="https://picsum.photos/id/15/300/300" alt="相册照片" class="w-100 rounded" style="height: 100px; object-fit: cover;">
                        <img src="https://picsum.photos/id/20/300/300" alt="相册照片" class="w-100 rounded" style="height: 100px; object-fit: cover;">
                        <img src="https://picsum.photos/id/25/300/300" alt="相册照片" class="w-100 rounded" style="height: 100px; object-fit: cover;">
                        <img src="https://picsum.photos/id/30/300/300" alt="相册照片" class="w-100 rounded" style="height: 100px; object-fit: cover;">
                        <img src="https://picsum.photos/id/35/300/300" alt="相册照片" class="w-100 rounded" style="height: 100px; object-fit: cover;">
                    </div>
                </div>
            </div>
        </div>

        <!-- 样式2 -->
        <div id="style2" class="profile-container profile-style">
            <!-- 头部 -->
            <div class="profile-header">
                <div class="profile-header-content">
                    <div class="avatar avatar-large">
                        <img src="https://picsum.photos/id/64/200/200" alt="用户头像" class="w-100 h-100 object-cover">
                    </div>
                    <div class="profile-details">
                        <h3 class="font-weight-bold">张小明</h3>
                        <p class="text-sm text-muted">@xiaoming_zhang</p>
                    </div>
                </div>
            </div>
            
            <!-- 个人简介 -->
            <div class="p-4 bg-white border-bottom">
                <p>热爱生活，喜欢记录身边的美好瞬间。曾去过20多个国家，拍摄了大量旅行照片。希望通过分享，让更多人看到世界的美丽。</p>
                <div class="mt-2 text-sm text-muted">
                    <i class="fas fa-map-marker-alt mr-1"></i> 上海，中国
                    <i class="fas fa-link ml-3 mr-1"></i> www.xiaoming.photo
                </div>
            </div>
            
            <!-- 操作按钮 -->
            <div class="profile-actions">
                <button class="btn btn-primary rounded-full px-6">编辑资料</button>
                <button class="btn btn-light rounded-full border"><i class="fas fa-cog"></i></button>
            </div>
            
            <!-- 统计数据 -->
            <div class="stats bg-white p-3 border-y">
                <div class="stat-item">
                    <div class="stat-number">368</div>
                    <div class="stat-label">帖子</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number">1.2k</div>
                    <div class="stat-label">粉丝</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number">258</div>
                    <div class="stat-label">关注</div>
                </div>
            </div>
            
            <!-- 内容区域 -->
            <div class="p-4">
                <!-- 最新动态 -->
                <div class="info-card bg-white p-4 shadow-sm">
                    <div class="d-flex justify-content-between mb-3">
                        <h4 class="font-weight-bold">最新动态</h4>
                        <span class="text-primary text-sm">查看全部</span>
                    </div>
                    <div class="mb-3">
                        <p class="text-sm">刚刚完成了最新的摄影作品集，希望大家喜欢！#摄影 #作品集</p>
                        <div class="mt-2 rounded-lg overflow-hidden">
                            <img src="https://picsum.photos/id/10/600/400" alt="照片" class="w-100">
                        </div>
                        <div class="mt-3 d-flex justify-content-between text-sm">
                            <div><i class="far fa-heart mr-1"></i> 128</div>
                            <div><i class="far fa-comment mr-1"></i> 36</div>
                            <div><i class="far fa-bookmark mr-1"></i> 收藏</div>
                        </div>
                    </div>
                </div>
                
                <!-- 相册卡片 -->
                <div class="info-card bg-white p-4 shadow-sm">
                    <div class="d-flex justify-content-between mb-3">
                        <h4 class="font-weight-bold">精选相册</h4>
                        <span class="text-primary text-sm">管理</span>
                    </div>
                    <div class="grid grid-cols-3 gap-1">
                        <img src="https://picsum.photos/id/10/300/300" alt="相册照片" class="w-100 rounded" style="height: 100px; object-fit: cover;">
                        <img src="https://picsum.photos/id/15/300/300" alt="相册照片" class="w-100 rounded" style="height: 100px; object-fit: cover;">
                        <img src="https://picsum.photos/id/20/300/300" alt="相册照片" class="w-100 rounded" style="height: 100px; object-fit: cover;">
                    </div>
                </div>
                
                <!-- 推荐关注 -->
                <div class="info-card bg-white p-4 shadow-sm">
                    <h4 class="font-weight-bold mb-3">推荐关注</h4>
                    <div class="d-flex justify-content-between items-center mb-3">
                        <div class="d-flex items-center">
                            <div class="avatar avatar-small">
                                <img src="https://picsum.photos/id/65/200/200" alt="用户头像" class="w-100 h-100 object-cover">
                            </div>
                            <div class="ml-2">
                                <p class="font-weight-bold text-sm">李小花</p>
                                <p class="text-muted text-xs">摄影师</p>
                            </div>
                        </div>
                        <button class="btn btn-primary btn-sm rounded-full">关注</button>
                    </div>
                    <div class="d-flex justify-content-between items-center">
                        <div class="d-flex items-center">
                            <div class="avatar avatar-small">
                                <img src="https://picsum.photos/id/66/200/200" alt="用户头像" class="w-100 h-100 object-cover">
                            </div>
                            <div class="ml-2">
                                <p class="font-weight-bold text-sm">王大力</p>
                                <p class="text-muted text-xs">旅行博主</p>
                            </div>
                        </div>
                        <button class="btn btn-primary btn-sm rounded-full">关注</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 样式3（暗黑模式） -->
        <div id="style3" class="profile-container profile-style">
            <!-- 封面图 -->
            <div class="header-cover">
                <!-- 头像 -->
                <div class="avatar avatar-large">
                    <img src="https://picsum.photos/id/64/200/200" alt="用户头像" class="w-100 h-100 object-cover">
                </div>
            </div>
            
            <!-- 个人信息 -->
            <div class="profile-info">
                <h3 class="font-weight-bold">张小明</h3>
                <p class="text-muted">热爱旅行和摄影的自由职业者</p>
            </div>
            
            <!-- 统计数据 -->
            <div class="stats bg-gray-800">
                <div class="stat-item">
                    <div class="stat-number text-white">258</div>
                    <div class="stat-label text-gray-400">关注</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number text-white">1.2k</div>
                    <div class="stat-label text-gray-400">粉丝</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number text-white">368</div>
                    <div class="stat-label text-gray-400">帖子</div>
                </div>
            </div>
            
            <!-- 内容区域 -->
            <div class="p-4">
                <!-- 个人简介卡片 -->
                <div class="info-card p-4">
                    <h4 class="font-weight-bold mb-3"><i class="fas fa-user-circle mr-2 text-pink-500"></i>个人简介</h4>
                    <p class="text-gray-300">热爱生活，喜欢记录身边的美好瞬间。曾去过20多个国家，拍摄了大量旅行照片。希望通过分享，让更多人看到世界的美丽。</p>
                </div>
                
                <!-- 动态卡片 -->
                <div class="info-card p-4">
                    <h4 class="font-weight-bold mb-3"><i class="fas fa-fire mr-2 text-red-500"></i>最新动态</h4>
                    <div class="mb-3 pb-3 border-bottom border-gray-700">
                        <div class="d-flex">
                            <div class="avatar avatar-small">
                                <img src="https://picsum.photos/id/64/200/200" alt="用户头像" class="w-100 h-100 object-cover">
                            </div>
                            <div class="ml-2">
                                <p class="font-weight-bold">张小明</p>
                                <p class="text-gray-400 text-sm">今天 14:30</p>
                            </div>
                        </div>
                        <p class="mt-2 text-gray-300">刚刚完成了最新的摄影作品集，希望大家喜欢！#摄影 #作品集</p>
                        <div class="mt-2 grid grid-cols-3 gap-1">
                            <img src="https://picsum.photos/id/10/300/300" alt="照片" class="w-100 rounded">
                            <img src="https://picsum.photos/id/15/300/300" alt="照片" class="w-100 rounded">
                            <img src="https://picsum.photos/id/20/300/300" alt="照片" class="w-100 rounded">
                        </div>
                    </div>
                    <div>
                        <div class="d-flex justify-content-between">
                            <button class="btn bg-gray-700 text-white btn-sm hover:bg-gray-600"><i class="far fa-heart mr-1"></i> 128</button>
                            <button class="btn bg-gray-700 text-white btn-sm hover:bg-gray-600"><i class="far fa-comment mr-1"></i> 36</button>
                            <button class="btn bg-gray-700 text-white btn-sm hover:bg-gray-600"><i class="far fa-share-square mr-1"></i> 分享</button>
                        </div>
                    </div>
                </div>
                
                <!-- 相册卡片 -->
                <div class="info-card p-4">
                    <h4 class="font-weight-bold mb-3"><i class="fas fa-images mr-2 text-blue-500"></i>精选相册</h4>
                    <div class="grid grid-cols-3 gap-1">
                        <img src="https://picsum.photos/id/10/300/300" alt="相册照片" class="w-100 rounded" style="height: 100px; object-fit: cover;">
                        <img src="https://picsum.photos/id/15/300/300" alt="相册照片" class="w-100 rounded" style="height: 100px; object-fit: cover;">
                        <img src="https://picsum.photos/id/20/300/300" alt="相册照片" class="w-100 rounded" style="height: 100px; object-fit: cover;">
                        <img src="https://picsum.photos/id/25/300/300" alt="相册照片" class="w-100 rounded" style="height: 100px; object-fit: cover;">
                        <img src="https://picsum.photos/id/30/300/300" alt="相册照片" class="w-100 rounded" style="height: 100px; object-fit: cover;">
                        <img src="https://picsum.photos/id/35/300/300" alt="相册照片" class="w-100 rounded" style="height: 100px; object-fit: cover;">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入 jQuery 和 Bootstrap JS -->
    <script src="assets/js/jquery-3.6.0.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script>
        // 页面加载完成后执行
        $(document).ready(function() {
            // 样式切换功能
            $('#style1Btn').click(function() {
                switchStyle('style1');
                updateButtonState(this);
            });
            
            $('#style2Btn').click(function() {
                switchStyle('style2');
                updateButtonState(this);
            });
            
            $('#style3Btn').click(function() {
                switchStyle('style3');
                updateButtonState(this);
            });
            
            // 切换样式函数
            function switchStyle(styleId) {
                // 隐藏所有样式
                $('.profile-style').removeClass('active fade-in');
                
                // 显示选中的样式
                setTimeout(function() {
                    $('#' + styleId).addClass('active fade-in');
                }, 10);
            }
            
            // 更新按钮状态
            function updateButtonState(button) {
                // 移除所有按钮的active状态
                $('.style-switcher button').removeClass('active');
                
                // 添加当前按钮的active状态
                $(button).addClass('active');
            }
            
            // 初始化，设置默认显示的样式
            switchStyle('style1');
        });
    </script>
</body>
</html>